<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    搜索标题：
    <div class="layui-inline">
        <input class="layui-input" name="title" id="title" autocomplete="off">
    </div>
    搜索状态：
    <div class="layui-inline">
        <input class="layui-input" name="status" id="status" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

</body>
</html>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,limit:6
            ,url: 'api.php'
            ,cols: [[
                ,{field:'id', title: 'ID', width:100, sort: true, fixed: true}
                ,{field:'title', title: '标题', width:120}
                ,{field:'content', title: '文章内容', width:180, sort: true}
                ,{field:'author', title: '作者', width:120}
                ,{field:'status', title: '状态',width:80}
            ]]
            ,id: 'testReload'
            ,page: true
            ,height: 310
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var title = $('#title');
                var status = $('#status');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                            id: demoReload.val(),
                            title:title.val(),
                            status:status.val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>